<template>
  <view class="user-page">
    <view class="myInfo ss-font-36 ss-p-x-30 ss-size">
      <uv-status-bar />
      <view class="ss-flex ss-row-right">
        <uv-icon :name="iconSetting" color="#000000" size="26" @click="jump" />
      </view>
      <view class="ss-flex ss-m-y-10" @click="handleUser">
        <uv-avatar :src="webSrc(userInfo.avatar)" size="106rpx" />
        <view class="ss-m-x-20">
          <view class="ss-black ss-m-y-14 ss-flex">
            <view class="myInfo_t"> {{ userInfo.nickName || "--" }} </view>
            <view class="ss-grey-1 ss-font-24 ss-m-t-10 ss-m-x-10">
              {{ enumUserType(userInfo.userType) }}
            </view>
          </view>
          <view class="ss-font-24 ss-grey-1 ss-m-y-4">
            {{ userInfo.phonenumber || "--" }}
          </view>
        </view>
      </view>
    </view>
    <view class="ss-bg-w ss-black shadow">
      <view
        class="list ss-p-y-30 ss-p-x-40 ss-size ss-font-28"
        v-for="(i, index) in state.orderList"
        @click="changeTab(i.id, i.url)"
        :key="index"
      >
        <view class="list_box ss-flex ss-row-between ss-col-center">
          <view class="ss-flex">
            <view class="iconImg ss-r-10">
              <image :src="i.icon" class="image ss-size" />
            </view>
            <view class="ss-black ss-m-x-20">{{ i.title }}</view>
          </view>
          <uv-icon name="arrow-right" color="#757575" size="18" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { getUser } from "@/request/login.js";
import { webSrc, enumUserType } from "@/common/mothed.js";
import iconSetting from "@/static/user/icon_setting.png";
import iconReport from "@/static/user/icon_report.png";
import iconOrder from "@/static/user/icon_order.png";
import iconFile from "@/static/user/icon_file.png";
import iconAbout from "@/static/user/icon_about.png";
import iconCode from "@/static/user/icon_code.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:refresh"]);

watch(
  props,
  (v) => {
    if (v.refresh) {
      getUserInfo();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const userInfo = ref({}); // 用户信息
const state = reactive({
  orderList: [
    {
      id: 0,
      title: "维保报告",
      icon: iconReport,
      url: "/pages/Home/untreatedTask",
    },
    {
      id: 1,
      title: "我的工单",
      icon: iconOrder,
      url: "/pages/Order/index",
    },
    {
      id: 2,
      title: "我的方案",
      icon: iconFile,
      url: "/pages/user/plan",
    },
    {
      id: 3,
      title: "关于我们",
      icon: iconAbout,
      url: "/pages/user/about",
    },
    {
      id: 4,
      title: "签名扫描",
      icon: iconCode,
      url: "/pages/Task/addSign",
    },
  ],
});

onMounted(() => {
  getUserInfo();
});

// 获取用户信息
const getUserInfo = () => {
  let info = uni.getStorageSync("userInfo");
  if (info) userInfo.value = info;
  getUser()
    .then((res) => {
      if (res.code == 200) {
        userInfo.value = res.user;
        uni.setStorageSync("userInfo", res.user);
      }
    })
    .finally(() => {
      emit("update:refresh", false);
      uni.stopPullDownRefresh();
    });
};

// 跳转到指定页面
const changeTab = (e, url) => {
  if (e != 4) {
    uni.navigateTo({
      url,
    });
  } else {
    // #ifdef APP-PLUS
    uni.scanCode({
      scanType: "qrCode",
      success: (res) => {
        console.log(res.result);
        if (res.result) {
          let result = JSON.parse(res.result);
          if (typeof result != "object") {
            uni.showToast({
              title: "识别异常，请重试",
              icon: "none",
            });
            return;
          }
          if (!result.app || result.app != "fire") {
            uni.showToast({
              title: "非本应用二维码",
              icon: "none",
            });
            return;
          }
          if (result.userId != userInfo.value.userId) {
            uni.showToast({
              title: "PC登录用户与当前登录用户不一致",
              icon: "none",
            });
            return;
          }
          uni.navigateTo({
            url: `${url}?res=${res.result}`,
          });
        } else {
          uni.showToast({
            title: "无效二维码",
            icon: "none",
          });
        }
      },
    });
    // #endif
    // #ifdef H5
    // H5模拟数据
    let result = { app: "fire", userId: 1, page: "picture" };
    uni.navigateTo({
      url: `${url}?res=${JSON.stringify(result)}`,
    });
    // #endif
  }
};

// 跳转到我的信息
const handleUser = () => {
  uni.navigateTo({
    url: "/pages/user/myInfo",
  });
};

// 跳转到系统设置
const jump = () => {
  uni.navigateTo({
    url: "/pages/user/system",
  });
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";
.user-page {
  height: 100%;
  .myInfo {
    width: 100%;
    margin: 0 auto;
    padding-top: 20rpx;
    padding-bottom: 60rpx;
    color: #fff;
    background-image: url("../../static/userBg.png");
    background-size: 100% 100%;
    .image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
    }
    .myInfo_t {
      max-width: 400rpx;
    }
  }
  .shadow {
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background: #ffffff;
    box-shadow: 0 -10rpx 12rpx 2rpx rgba(198, 210, 201, 0.16);
    overflow: hidden;
    .list {
      background-color: #fff;
      &:active {
        background-color: #e6f1e9;
      }
      .list_box {
        .image {
          width: 92rpx;
          height: 90rpx;
        }
      }
      .iconImg {
        background: #f5f5f5;
        height: 90rpx;
        padding-top: 4rpx;
        box-sizing: border-box;
      }
    }
  }
}
</style>
